<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .size{
            font-size: 100px;
        }
        .color{
            color: red;
        }
        .active{
            background: skyblue;
        }
    </style>
</head>
<body>
<!--这里是MVVM中的View-->
    <div id="app">
    <!-- <p class="size color active">我是段落</p> -->
<!--
    如果需要通过v-bind给class绑定类名不能直接赋值 默认情况下v-bind回直接去model中查找数据但是model中没有对呀的属性
    所以无效，如果需要查找类名就必须将类名放入数组中用引号将类名扩起来才会去style中查找
    如果是通过v-bind来绑定类名可以编写一个三木运算符来实现按需绑定
    格式：条件表达式？'需要绑定的类名'：‘’
-->
    <!-- <p :class="['size','color', flag ?'active' : '']">我是段落</p> -->

    <!--如果是通过v-bind来绑定类名那在绑定的时候可以通过对象来决定是否需要绑定
    格式：['需要绑定的类名'：是否绑定]
    -->
    <!-- <p :class="['size','color', {'active' : true}]">我是段落</p> -->
    <p :class="obj">我是段落</p>
</div>
<script>
//这里是MVVM中的View Model
    let vue = new Vue({
    el: '#app',
//这里是MVVM中的Model
    data: {
        flag:false,
            obj:{
                'color':true,
                'size':false,
                'active':false
            }
        
    }
    });
</script>
</body>
</html>